<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>

    <!-- Favicons -->
    <link href="/img/favicon.png" rel="icon">
    <link href="/img/apple-touch-icon.png" rel="apple-touch-icon">

    <!-- Bootstrap core CSS -->
    <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--external css-->
    <link href="/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/css/zabuto_calendar.css">
    <link rel="stylesheet" type="text/css" href="/lib/gritter/css/jquery.gritter.css" />
    <!-- Custom styles for this template -->
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/style-responsive.css" rel="stylesheet">
    <script src="/lib/chart-master/Chart.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.10/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <!-- 从模板中复制文件上传按钮 -->
    <link rel="stylesheet" href="/lib/file-uploader/css/jquery.fileupload.css">
    <link rel="stylesheet" href="/lib/file-uploader/css/jquery.fileupload-ui.css">
    <!-- 引入分页css -->
    <link rel="stylesheet" href="/css/zpageNav.css">
    <!-- 引入分页js -->
    <script src="/js/zpageNav.js"></script>

    <style>
        th {
            text-align: center;
        }

        .ibox-content span {
            color: red;
        }
    </style>
</head>

<body>
    <section id="container"> 
        <header class="header black-bg">
            <div class="sidebar-toggle-box">
                <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
            </div>
            <a href="/page/index.html" class="logo"><b>药企内部<span>管理系统</span></b></a>
            <div class="top-menu">
                <ul class="nav pull-right top-menu">
                    <li><a class="logout" href="/login.html">Logout</a></li>
                </ul>
            </div>
        </header>
        <!--header end-->
        <!-- **********************************************************************************************************************************************************
        MAIN SIDEBAR MENU
        *********************************************************************************************************************************************************** -->
        <!--sidebar start-->
        <aside>
            <div id="sidebar" class="nav-collapse ">
                <!-- sidebar menu start-->
                <ul class="sidebar-menu" id="nav-accordion">
                    <p class="centered">
                        <!--<img src="/img/ny.jpg" class="img-circle" width="80">-->
                        <img :src="userImage" class="img-circle" width="80">
                    </p>
                    <h5 class="centered">{{userName}}</h5>
                    <li class="sub-menu">
                        <a href="javascript:;">
                            <i class="fa fa-user"></i>
                            <span>用户管理</span>
                        </a>
                        <ul class="sub">
                            <li><a href="/page/user/list.html">用户列表</a></li>
                            <li><a href="buttons.html">职务权限</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- sidebar menu end-->
            </div>
        </aside>
        <!--sidebar end-->
        <!-- **********************************************************************************************************************************************************
        MAIN CONTENT
        *********************************************************************************************************************************************************** -->
        <!--main content start-->
        <section id="main-content">
            <section class="wrapper">
                <h3><i class="fa fa-angle-right"></i>用户列表</h3>
                <hr>
                <div class="row">
                    <div class="col-lg-12">
                        <div>
                            <form class="form-inline" role="form">

                                <div class="form-group">
                                    <select class="form-control" @click="queryAllDept" v-model="searchParams.deptId">
                                        <option value="-1">选择部门</option>
                                        <option v-for="(dept,index) in deptList" :key="index" :value="dept.id">{{dept.deptName}}</option>
                                    </select>

                                </div>

                                <div class="form-group">
                                    <select class="form-control" @click="queryAllJobInfo" v-model="searchParams.jobId">
                                        <option value="-1">选择职务</option>
                                        <option v-for="(job,index) in jobList" :key="index" :value="job.id">{{job.jobName}}</option>
                                    </select>

                                </div>

                                <div class="form-group">
                                    <label class="sr-only" for="trueName">Email address</label>
                                    <input class="form-control" id="trueName" placeholder="姓名" v-model="searchParams.nameParam">
                                </div>

                                <div class="form-group">
                                    <label class="sr-only" for="phoneOrNo">Password</label>
                                    <input class="form-control" id="phoneOrNo" placeholder="手机号或者工号" v-model="searchParams.phoneOrNumber">
                                </div>
                                <button type="button" class="btn btn-theme" @click="queryAllUserInfo">搜索</button>
                            </form>
                        </div>
                        <!-- /form-panel -->
                    </div>
                    <!-- /col-lg-12 -->
                </div>
                <br>
                <div class="row col-lg-12">
                    <div class="form-inline">
                        <div class="form-group">
                            <a data-toggle="modal" class="btn btn-theme" href="list.html#modal-form">
                                <i class="fa fa-cog"></i> 添加用户
                            </a>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-danger" @click="deleteUserBatch">
                                <i class="fa fa-trash-o ">批量删除</i></button>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-warning" @click="exportUserInfo">
                                <i class="fa fa-download"></i>导出
                            </button>
                        </div>
                        <div class="form-group">
                            <span class="btn btn-success fileinput-button">
                                <i class="glyphicon glyphicon-upload" style="color: white;"></i>
                                <span style="color: white;">导入</span>
                                <input type="file" class="" accept=".xls,.xlsx" @change="importUserInfo">
                            </span>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-warning"  @click="editPassBtn"
                                    data-toggle="modal" data-target="#editPassModal" >
                                <i class="fa fa-pencil"></i>修改当前用户密码
                            </button>
                        </div>
                    </div>
                </div>
                <br><br><br>

                <!-- row -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="content-panel">
                            <table class="table table-advance table-hover table-bordered" style="text-align: center;">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th class="hidden-phone">工号</th>
                                        <th>姓名</th>
                                        <th>手机号</th>
                                        <th>部门</th>
                                        <th>职务</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-show="userList.length==0">
                                        <td colspan="8">没有找到合适的数据</td>
                                    </tr>
                                    <tr v-for="(user,index) in userList" :key="index">
                                        <td>
                                            <input type="checkbox" class="myCheckBox" v-show="user.id!=loginUserId" :value="user.id" v-model="checkedNames">
                                        </td>
                                        <td>{{user.jobNumber}}</td>
                                        <td class="hidden-phone">{{user.userTrueName}}</td>
                                        <td>{{user.phone}}</td>
                                        <td><span class="label label-info label-mini">{{user.deptName}}</span></td>
                                        <td><span class="label label-success label-mini">{{user.jobName}}</span></td>
                                        <td>{{user.createTime}}</td>
                                        <td>
                                            <button class="btn btn-success btn-xs" data-toggle="modal"
                                                data-target="#myModal"  @click="queryUserById(user.id)">
                                                <i class="fa fa-check">用户详情</i>
                                            </button>
                                            <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#ccc" @click="queryUserById(user.id)">
                                                <i class="fa fa-pencil">编辑</i>
                                            </button>
                                            <button class="btn btn-danger btn-xs" @click="deleteUserById(user.id)">
                                                <i class="fa fa-trash-o ">删除</i>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- pagination start-->
                            <div class="wrap" id="wrap">
                                <zpagenav v-bind:page="page" v-bind:page-size="pageSize" v-bind:total="total"
                                    v-bind:max-page="maxPage" v-on:pagehandler="pageHandler">
                                </zpagenav>
                            </div>
                            <!-- pagination end-->
                        </div>
                        <!-- /content-panel -->
                    </div>
                    <!-- /col-md-12 -->
                </div>
                <!-- /row -->
            </section>
        </section>
        <!-- /MAIN CONTENT -->
        <!-- /MAIN CONTENT -->

        <!-- 修改密码 modal start -->
        <div>
            <!-- Modal -->
            <div class="modal fade" id="editPassModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">修改密码</h4>
                        </div>
                        <div class="modal-body">
                            <div class="ibox-content">
                                <form class="form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">原密码：</label>
                                        <div class="col-sm-6">
                                            <input type="text" disabled class="form-control" v-model="queryUserObj_1.password">
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">新密码：</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" v-model="newPass">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-success" data-dismiss="modal" @click="updatePass">提交</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 修改密码 modal end -->
        <!-- 修改用户 modal start -->
        <div id="ccc" class="modal fade" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body" style="margin-left: 30px;">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5 style="font-weight: bolder;">修改用户</h5>
                                        <button type="button" class="close" data-dismiss="modal"
                                            style="margin-top: -30px;" aria-hidden="true">&times;</button>
                                    </div>
                                    <br>
                                    <div class="ibox-content">
                                        <input type="hidden" v-model="updateUserObj.id">
                                        <form method="get" class="form-horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">姓名:</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" v-model="updateUserObj.userTrueName">
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group"><label class="col-sm-2 control-label">工号</label>

                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" v-model="updateUserObj.jobNumber">
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">性别<br />
                                                </label>

                                                <div class="col-sm-10">
                                                    
                                                    <div class="radio-inline">
                                                        <label>
                                                            <input type="radio" checked="" value="0" v-model="updateUserObj.gender"
                                                                 name="gender">男
                                                        </label>
                                                    </div>
                                                    <div class="radio-inline">
                                                        <label>
                                                            <input type="radio" value="1" v-model="updateUserObj.gender"
                                                                name="gender">女
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group"><label class="col-sm-2 control-label">联系方式</label>

                                                <div class="col-sm-6"><input type="text" class="form-control" v-model="updateUserObj.phone"></div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-lg-2 control-label">Email</label>
                                                <div class="col-lg-6">
                                                    <input type="text" class="form-control" v-model="updateUserObj.email">
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-lg-2 control-label">微信账号</label>
                                                <div class="col-lg-6">
                                                    <input type="text" class="form-control" v-model="updateUserObj.wechat">
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-lg-2 control-label">QQ账号</label>
                                                <div class="col-lg-6">
                                                    <input type="text" class="form-control" v-model="updateUserObj.qqNumber">
                                                </div>
                                            </div>

                                            
                                            
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">部门</label>
                                                <div class="col-sm-6">
                                                    <select class="form-control m-b" name="account" @click="queryAllDept" v-model="updateUserObj.deptId">
                                                        <option value="=1">请选择</option>
                                                        <option v-for="(dept,index) in deptList" :key="index" :value="dept.id">{{dept.deptName}}</option>
                                                        
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">职位</label>
                                                <div class="col-sm-6">
                                                    <select class="form-control m-b" name="account" @click="queryAllJobInfo" v-model="updateUserObj.jobId">
                                                        <option value="=1">请选择</option>
                                                        <option v-for="(job,index) in jobList" :key="index" :value="job.id">{{job.jobName}}</option>
                                                        
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group"><label class="col-sm-2 control-label">联系地址</label>

                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" v-model="updateUserObj.address">
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">修改用户头像</label>
                                                <div class="col-sm-8">
                                                    <div class="col-sm-2">
                                                        <span class="btn btn-success fileinput-button">
                                                            <i class="glyphicon glyphicon-upload" style="color: white;" ></i>
                                                            <span style="color: white;">upload</span>
                                                            <input type="file" accept="image/jpeg" @change="updateUserImage">
                                                        </span>
                                                    </div>
                                                    <div class="col-sm-2">
                                                        <img :src="updateUserObj.userImage" style="width: 100px; height: 100px; margin-left: 80px;">
                                                    </div>                                                  
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-4 col-sm-offset-2">
                                                    <button class="btn btn-primary" type="button" @click="updateUser" style="width: 100%;">提交</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 编辑 modal end -->
        <!-- 查看详情modal start -->
        <div>
            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">用户详情</h4>
                        </div>
                        <div class="modal-body">
                            <div class="ibox-content">
                                <div style="font-size: 15px;">
                                    <div style="margin-top: 80px;position: fixed;">
                                        <img :src="queryUserObj.userImage" alt=""
                                            style="width: 100px; height: 100px; text-align: center;">
                                    </div>

                                    <div style="position:relative; margin-left: 180px;">
                                        姓名: {{queryUserObj.userTrueName}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                                        工号: {{queryUserObj.jobNumber}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                                        性别: {{queryUserObj.gender==0?'男':'女'}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                                        <br>
                                        联系方式: {{queryUserObj.phone}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                                        邮箱: {{queryUserObj.email}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                                        微信账号: {{queryUserObj.wechat}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                                        <br>
                                        QQ号: {{queryUserObj.qqNumber}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                                        部门: {{queryUserObj.deptName}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                                        职位: {{queryUserObj.jobName}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                                        <br>
                                        联系地址: {{queryUserObj.address}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 查看详情modal end -->
        <!-- insert modal start -->
        <div id="modal-form" class="modal fade" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body" style="margin-left: 30px;">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5 style="font-weight: bolder;">新增用户</h5>
                                        <button type="button" class="close" data-dismiss="modal"
                                            style="margin-top: -30px;" aria-hidden="true">&times;</button>
                                    </div>
                                    <br>
                                    <div class="ibox-content">
                                        <form method="get" class="form-horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">姓名:</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" v-model="inserUserObj.userTrueName">
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">密码:</label>
                                                <div class="col-sm-6">
                                                    <input type="text" disabled value="123456"
                                                        class="form-control" v-model="inserUserObj.password">(系统生成初始密码)
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group"><label class="col-sm-2 control-label">工号</label>

                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" v-model="inserUserObj.jobNumber">
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">性别<br />
                                                </label>

                                                <div class="col-sm-10">
                                                    
                                                    <div class="radio-inline">
                                                        <label>
                                                            <input type="radio" checked="" value="0" v-model="inserUserObj.gender"
                                                                 name="gender">男
                                                        </label>
                                                    </div>
                                                    <div class="radio-inline">
                                                        <label>
                                                            <input type="radio" value="1" v-model="inserUserObj.gender"
                                                                name="gender">女
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group"><label class="col-sm-2 control-label">联系方式</label>

                                                <div class="col-sm-6"><input type="text" class="form-control" v-model="inserUserObj.phone"></div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-lg-2 control-label">Email</label>
                                                <div class="col-lg-6">
                                                    <input type="text" class="form-control" v-model="inserUserObj.email">
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-lg-2 control-label">微信账号</label>
                                                <div class="col-lg-6">
                                                    <input type="text" class="form-control" v-model="inserUserObj.wechat">
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-lg-2 control-label">QQ账号</label>
                                                <div class="col-lg-6">
                                                    <input type="text" class="form-control" v-model="inserUserObj.qqNumber">
                                                </div>
                                            </div>

                                            
                                            
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">部门</label>
                                                <div class="col-sm-6">
                                                    <select class="form-control m-b" name="account" @click="queryAllDept" v-model="inserUserObj.deptId">
                                                        <option value="=1">请选择</option>
                                                        <option v-for="(dept,index) in deptList" :key="index" :value="dept.id">{{dept.deptName}}</option>
                                                        
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">职位</label>
                                                <div class="col-sm-6">
                                                    <select class="form-control m-b" name="account" @click="queryAllJobInfo" v-model="inserUserObj.jobId">
                                                        <option value="=1">请选择</option>
                                                        <option v-for="(job,index) in jobList" :key="index" :value="job.id">{{job.jobName}}</option>
                                                        
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group"><label class="col-sm-2 control-label">联系地址</label>

                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" v-model="inserUserObj.address">
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">用户头像</label>
                                                <div class="col-sm-8">
                                                    <div class="col-sm-2">
                                                        <span class="btn btn-success fileinput-button">
                                                            <i class="glyphicon glyphicon-upload" style="color: white;" ></i>
                                                            <span style="color: white;">添加头像</span>
                                                            <input type="file" accept="image/jpeg" @change="uploadImage">
                                                        </span>
                                                    </div>
                                                    <div class="col-sm-2">
                                                        <img :src="uploadUserImage" style="width: 100px; height: 100px; margin-left: 80px;">
                                                    </div>                                                  
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-4 col-sm-offset-2">
                                                    <button class="btn btn-danger" type="reset">重置</button>
                                                    <button class="btn btn-primary" type="button" @click="insertUser">提交</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- insert modal end -->

    </section>
    <!-- js placed at the end of the document so the pages load faster -->
    <script src="/lib/jquery/jquery.min.js"></script>
    <script src="/lib/bootstrap/js/bootstrap.min.js"></script>
    <script class="include" type="text/javascript" src="/lib/jquery.dcjqaccordion.2.7.js"></script>
    <script src="/lib/jquery.scrollTo.min.js"></script>
    <script src="/lib/jquery.nicescroll.js" type="text/javascript"></script>
    <!--common script for all pages-->
    <script src="/lib/common-scripts.js"></script>
    <!--script for this page-->
<script>
    let myAxios = axios.create({
        responseType:"blob",
    });
    let vue=new Vue({
        el:"#container",
        data:{
            userName:"",
            userImage:"",
            userList:{},
            deptList:{},
            jobList:{},
            inserUserObj:{
                userTrueName:"",
                password:"123456",
                jobNumber:"",
                gender:"0",
                phone:"",
                email:"",
                wechat:"",
                qqNumber:"",
                deptId:"-1",
                jobId:"-1",
                address:"",
                userImage:"",
            },
            queryUserObj:{},
            updateUserObj:{
                imageSrc:"",
            },
            loginUserId:0,
             //分页相关的数据
            page: 1,  //显示的是哪一页
            pageSize: 5, //每一页显示的数据条数
            total: 0, //记录总数
            maxPage: 0,  //最大页数
            checkedNames: [],
            searchParams:{
                deptId:"-1",
                jobId:"-1",
                nameParam:"",
                phoneOrNumber:"",
            },
            uploadUserImage:"",
            userPastImage:"",
            newPass:"",
            queryUserObj_1:{},
        },
        methods: {
            //修改密码
            updatePass(){
                let params = {
                    id:this.loginUserId,
                    newPass:this.newPass,
                };
                axios.post(`http://127.0.0.1:9000/api/user/pass`,params)
                .then(response=>{
                    //跳转到login.html
                    //清除缓存里面个人信息
                    //localStorage.clear();
                    localStorage.removeItem("loginUserInfo");
                    location.replace("/login.html");
                });
            },

            //获取原密码
            editPassBtn(){
                axios.get('http://127.0.0.1:9000/api/user/query/'+this.loginUserId)
                .then(response => {
                    let {status,mag,data}=response.data;
                    this.queryUserObj_1=data;
                })
                .catch(err => {
                    console.error(err); 
                })
            },

            //导入
            importUserInfo(event){
                //异步调用接口   实现导入
                //1.获得用户选择的文件
                //2.将文件内容传到服务器
                //3.调用接口
                //等价于====> 文件上传
                // FormData  post  multipart/form-data
                let importFile = event.target.files[0];
                let formData = new FormData();
                formData.append("importFile", importFile);
                //异步上传
                let config={
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post('http://127.0.0.1:9000/api/user/import',formData,config)
                .then(response => {
                    let {status,mag,data}=response.data;
                    if (status==200) {
                        location.replace("/page/user/list.html");
                    }
                    
                })
                .catch(err => {
                    console.error(err); 
                })
            },

            //导出
            exportUserInfo(){
                //异步请求
                myAxios.post(`http://127.0.0.1:9000/api/user/export`)
                .then(response => {
                    //创建下载提示  将成功返回的内容下载到文件中
                    //后端响应的类型 应该是字节 blob
                    let data=response.data;
                    const blob=new Blob([data],{
                        type:"application/vnd.ms-excel;charset=utf-8",
                    })
                    //blob就是获得到字节内容
                    let dowenloadLink=document.createElement("a");
                    dowenloadLink.href=window.URL.createObjectURL(blob);
                    dowenloadLink.download="导出用户信息.xlsx";
                    dowenloadLink.click();//自动下载到 "导出用户信息.xlsx" 

                    //问题: 下载文件成功  可能会出现文件打不开
                    //原因: axios发起异步请求  默认返回的json的数据  也就是说获得的data是json的数据
                })
                .catch(err => {
                    console.error(err); 
                })
            },

            //删除旧头像
            updateUserImage(event){
                let userPastImage=this.userPastImage;
                axios.get('http://127.0.0.1:9000/api/user/deleteImage?userPastImage='+userPastImage)
                .then(res => {
                    
                })
                .catch(err => {
                    console.error(err); 
                })
                this.uploadImage(event);
            },

            //上传头像
            uploadImage(event){
                //上传头像
                //1.获得用户选择的头像内容(文件内容)
                //2.将二进制文件内容 传递到后端接口
                //3.js请求接口
                // 3.1 post
                // 3.2 multipart/form-data
                // 3.3 文件数据封装FormData
                let uploadFile= event.target.files[0];
                let fromDate=new FormData;
                fromDate.append("uploadFile",uploadFile);
                //异步上传
                let config={
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                axios.post('http://127.0.0.1:9000/api/user/upload',fromDate,config)
                .then(response => {
                    let {status,mag,data}=response.data;
                    if (status==200) {
                        this.uploadUserImage='http://127.0.0.1:9000'+data;
                        
                        this.inserUserObj.userImage=data;
                        this.updateUserObj.userImage='http://127.0.0.1:9000'+data;
                        this.updateUserObj.imageSrc=data;
                        //this.$set(this.inserUserObj,'userImage',data)
                    }
                })
                .catch(err => {
                    console.error(err); 
                })
            },

            //pagehandler方法 跳转到page页
            pageHandler(page){
                //console.log(page);
                this.page=page;
                //发起异步请求 分页查询用户信息
                this.queryAllUserInfo();
                this.checkedNames = [];
            },
            
            queryAllUserInfo(){
                //查询数据库的所有用户的信息 list.html展示
                //异步查询
                //条件加分页    
                axios.get('http://127.0.0.1:9000/api/user/query',{
                    params:{
                        page:this.page,
                        size:this.pageSize,
                        deptId:this.searchParams.deptId,
                        jobId:this.searchParams.jobId,
                        nameParam:this.searchParams.nameParam,
                        phoneOrNumber:this.searchParams.phoneOrNumber,
                    }
                })
                .then(response => {
                    let {status,mag,data}=response.data;
                    //判断是否查询到数据
                    if(status=="200"){
                        let {page,total,maxPage,list}=data;
                        this.page=page;
                        this.total=total;
                        this.maxPage=maxPage;
                        this.userList=list;
                        //console.log(data);
                        this.searchParams.deptId=-1;
                        this.searchParams.jobId=-1;
                        this.searchParams.nameParam ="";
                        this.searchParams.phoneOrNumber ="";
                    }
                })
                .catch(err => {
                    console.error(err); 
                })
            },
            queryAllDept(){
                //查询所有部门
                axios.get('http://127.0.0.1:9000/api/dept/query')
                .then(response => {
                    let {status,mag,data}=response.data;
                    if(status=="200"){
                        this.deptList=data;
                    }
                })
                .catch(err => {
                    console.error(err); 
                })
            },
            queryAllJobInfo(){
                //查询所有职位
                axios.get('http://127.0.0.1:9000/api/job/query')
                .then(response => {
                    let {status,mag,data}=response.data;
                    if(status="200"){
                        this.jobList=data;
                    }
                    
                })
                .catch(err => {
                    console.error(err); 
                })
            },
            insertUser(){
                //获得用户提交的信息
                //异步调用
                axios.post('http://127.0.0.1:9000/api/user/insert',this.inserUserObj)
                .then(response => {
                    let {status,mag,data}=response.data;
                    if(status="200"){
                        location.replace("/page/user/list.html");
                    }
                })
                .catch(err => {
                    console.error(err); 
                })
            },
            queryUserById(uid){
                //发起异步请求 根据id查询用户信息 查询数据库完整内容
                axios.get('http://127.0.0.1:9000/api/user/query/'+uid)
                .then(response => {
                    let {status,mag,data}=response.data;
                    this.userPastImage=data.userImage;
                    //this.$set(this.data,userPastImage,data.userImage);
                    data.userImage='http://127.0.0.1:9000'+data.userImage;
                    this.queryUserObj=data;
                    this.updateUserObj=data;
                    this.queryAllDept();
                    this.queryAllJobInfo();
                })
                .catch(err => {
                    console.error(err); 
                })
            },
            updateUser(){
                //异步修改用户信息
                axios.post('http://127.0.0.1:9000/api/user/update',this.updateUserObj)
                .then(response => {
                    let {status,mag,data}=response.data;
                    if(status=="200"){
                        location.replace("/page/user/list.html");
                    }
                })
                .catch(err => {
                    console.error(err); 
                })
            },
            deleteUserById(uid){
                //判断删除用户是否为登录者
                //是 则不能删除
                //如何判断呢?  登录成功之后  localstorage
                //从缓存里面获得用户id
                
                if(uid==this.loginUserId){
                    alert("无法删除当前用户");
                    return;
                }
                if(window.confirm("确认要删除吗？"+uid)){
                    //发起异步请求 调用后端接口 删除数据库数据
                    axios.delete('http://127.0.0.1:9000/api/user/delete/'+uid)
                    .then(response => {
                        let {status,mag,data}=response.data;
                        if(status=="200"){
                            location.replace("/page/user/list.html");
                        }
                    })
                    .catch(err => {
                        console.error(err); 
                    })
                }
            },
            deleteUserBatch(){
                //1.获得用户选择要删除的多行记录id---->获得多个id
                //===> 获得多个复选框的value属性的数据
                let idArary=[];
                let checkboxArray=document.querySelectorAll(".myCheckBox");
                checkboxArray.forEach(checkbox=>{
                    if(checkbox.checked){
                        idArary.push(checkbox.value)
                    }
                });
                // idArary.forEach(uid=>{
                //     axios.delete('http://127.0.0.1:9000/api/user/delete/'+uid)
                //     .then(response => {
                //         let {status,mag,data}=response.data;
                //         if(status=="200"){
                //             location.replace("/page/user/list.html");
                //         }
                //     })
                //     .catch(err => {
                //         console.error(err); 
                //     })
                // })
                if(confirm("确认要删除吗？")){
                    axios.delete('http://127.0.0.1:9000/api/user/deleteBatch?idList='+idArary)
                    .then(response => {
                        let {status,mag,data}=response.data;
                        if(status=="200"){
                            location.replace("/page/user/list.html");
                        }
                    })
                    .catch(err => {
                        console.error(err); 
                    })
                }
            }
        },
        created() {
            let loginUserInfo=localStorage.getItem("loginUserInfo");
            let userObj=JSON.parse(loginUserInfo);
            this.userName=userObj.name;
            this.userImage="http://127.0.0.1:9000/"+userObj.image;
            this.loginUserId=userObj.id;
            //查询所有用户信息
            //this.queryAllUserInfo();
            //created  表示页面加载完毕，立即执行
            this.pageHandler(1);
        },
    })
</script>
</body>

</html>